<template>
	<view>
		<nav-bar :titleName="'申请入驻'" :backUrl="'/'" style=" position: sticky;top: 0;z-index: 99;"></nav-bar>

		<view class="main_body">
			<view class="store_info">
				<view class="store_info_title">
					店铺信息
				</view>
				<view class="store_form">
					<u--form labelPosition="left" labelWidth="100" :model="model1" ref="uForm">
						<u-form-item label="品牌名称" prop="userInfo.name" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.name" placeholder="请输入品牌名称" border="none"></u--input>
						</u-form-item>
						<u-form-item label="主营类目" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
							ref="item2">
							<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择主营类目"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 接单类型 -->
						<view class="jd_type">
							<view class="jd_type_title">
								接单类型
							</view>
							<view class="jdType_form">
								<view class="jd_radioGroup">
									<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
										<u-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"
											@change="radioChange">
										</u-radio>
									</u-radio-group>
								</view>
								<view class="bj_list">
									<view class="bj_input_item fl-center" v-for="(item,index) in bj_list" :key="index">
										<u--input placeholder="请输入最低套餐报价" v-model="item.bjValue" border="none"></u--input>
									</view>
								</view>
							</view>
						</view>

						<u-form-item label="门店大小" prop="userInfo.area" borderBottom @click="showSex = true; hideKeyboard()"
							ref="item3">
							<u--input v-model="model1.userInfo.area" placeholder="请输入门店大小" border="none"></u--input>
							<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
							<view class="dw">
								㎡
							</view>
						</u-form-item>
						<u-form-item label="门店销售人员" prop="userInfo.staff" borderBottom @click="showSex = true; hideKeyboard()"
							ref="item3">
							<u--input v-model="model1.userInfo.staff" placeholder="请输入门店销售人员" border="none"></u--input>
							<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
						</u-form-item>
						<u-form-item label="店铺地址" prop="userInfo.location" borderBottom @click="showSex = true; hideKeyboard()"
							ref="item3">
							<u--input v-model="model1.userInfo.location" placeholder="请输入店铺地址" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="详细地址" prop="userInfo.address" borderBottom @click="showSex = true; hideKeyboard()"
							ref="item3">
							<u--input v-model="model1.userInfo.address" placeholder="请输入详细地址" border="none"></u--input>
							<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
						</u-form-item>

						<view class="yyzz">
							<view class="yyzz_text">
								营业执照照片
							</view>
							<view class="pic_upload fl-center">
								<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="6" multiple
									:previewFullImage="true" :maxCount="3" width="208" height="208">
									<view class="upload_btn fl-center">
										<view class="" style="display: flex;flex-direction: column;align-items: center;">
											<view class="upload_icon">
												<image src="../../static/other/plus.png" mode=""></image>
											</view>
											<view class="">
												上传图片
											</view>
										</view>
									</view>
								</u-upload>
							</view>
						</view>
					</u--form>

					<u-action-sheet :show="showSex" :actions="actions" title="请选择主营类目"
						@close="showSex = false" @select="sexSelect">
					</u-action-sheet>
				</view>
			</view>

			<view class="busi_info">
				<view class="store_info_title">
					商家信息
				</view>
				<view class="busi_form">
					<u--form labelPosition="left" labelWidth="100" :model="model2" ref="uForm2">
						<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item11">
							<u--input v-model="model2.userInfo.name" placeholder="请输入姓名" border="none"></u--input>
						</u-form-item>
						<u-form-item label="电话" prop="userInfo.tel" ref="item12">
							<u--input v-model="model2.userInfo.tel" placeholder="请输入电话" border="none"></u--input>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>
		
		<view class="confirm fl-center">
			<view class="confirm_btn fl-center">
				<view class="">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
						area: '',
						staff: '',
						location: '',
						address: ''
					},
				},
				model2: {
					userInfo: {
						name: '',
						tel: ''
					},
				},
				actions: [{
						name: '主营类目1',
					},
					{
						name: '主营类目2',
					}
				],
				bj_list: [{
					bjValue: ''
				}, {
					bjValue: ''
				}, {
					bjValue: ''
				}, {
					bjValue: ''
				}, {
					bjValue: ''
				}, {
					bjValue: ''
				}, {
					bjValue: ''
				}, {
					bjValue: ''
				}, {
					bjValue: ''
				}],
				radiolist1: [{
						name: '婚纱摄影',
						disabled: false
					},
					{
						name: '全家福',
						disabled: false
					},
					{
						name: '写真照',
						disabled: false
					}, {
						name: '婚纱礼服租赁',
						disabled: false
					},
					{
						name: '跟拍',
						disabled: false
					},
					{
						name: '跟妆',
						disabled: false
					},
					{
						name: '婚庆策划',
						disabled: false
					},
					{
						name: '婚宴酒店',
						disabled: false
					},
					{
						name: '婚礼堂一站式',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '婚纱摄影',
				fileList1: [],
			};
		},

		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			hideKeyboard() {

			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.main_body {
		display: flex;
		flex-direction: column;
		padding-bottom: 120rpx;
	}

	.store_info {
		width: 690rpx;
		// height: 1916rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 10rpx auto 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.busi_info {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 10rpx auto 30rpx;
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
	}

	.store_info_title {
		// width: 100%;
		font-size: 32rpx;
		font-weight: 600;
		color: #343434;
		margin-bottom: 10rpx;
	}

	.fl-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/deep/ .uni-input-placeholder {
		text-align: right !important;
		padding-right: 20rpx !important;
		box-sizing: border-box !important;
	}

	/deep/ .uni-input-input {
		text-align: right !important;
		padding-right: 20rpx !important;
		box-sizing: border-box !important;
	}

	/deep/ .u-form-item {
		height: 100rpx !important;
	}

	/deep/ .u-radio {
		height: 85rpx !important;
		margin-bottom: 0 !important;
	}

	.jd_type {
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;

		.jd_type_title {
			margin-bottom: 10rpx;
			font-size: 28rpx;
			color: #343434;
		}

		.jdType_form {
			width: 630rpx;
			height: 811rpx;
			background: #F6F6F6;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.jd_radioGroup {
		width: 50%;
		height: 100%;

	}

	.bj_list {
		width: 50%;
		height: 100%;

		.bj_input_item {
			width: 100%;
			height: 85rpx;
		}
	}

	.dw {
		font-size: 28rpx;
		color: #343434;
	}

	.pic_upload {
		width: 228rpx;
		height: 228rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		padding: 10rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.upload_btn {
		width: 208rpx;
		height: 208rpx;
		background: #F6F6F6;
		font-size: 26rpx;
		color: #7E7E7E;

		.upload_icon {
			width: 64rpx;
			height: 64rpx;

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

	}
	
	.confirm {
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 10rpx 0rpx rgba(0,0,0,0.1);
		position: fixed;
		bottom: 0;
		left: 0;
		.confirm_btn {
			width: 630rpx;
			height: 80rpx;
			background: #FE609D;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>